﻿@page "/chart/polar-stacking-column"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.DropDowns

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the wind rose chart designed using the polar and radar series with a stacking column type chart.  The wind rose chart helps visualize wind patterns, i.e. wind speed and wind direction.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the polar and radar series with a stacking column type chart. Switching between polar and radar series can be done using <code>Series Type</code> in the property panel.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the polar and radar series with a stacking column type chart can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/polar/#stacked-column'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-8 control-section sb-property-border">
    <SfChart Title="Wind Rose Chart" Theme="@Theme">
        <ChartPrimaryXAxis Interval="1" ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Coefficient="100" LabelPlacement="LabelPlacement.OnTicks">
        </ChartPrimaryXAxis>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="6-9" XName="XValue" Width="2" YName="YValue" Type="@SeriesType" DrawType="ChartDrawType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="9-11" XName="XValue" Width="2" YName="YValue1" Type="@SeriesType" DrawType="ChartDrawType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="11-14" XName="XValue" Width="2" YName="YValue2" Type="@SeriesType" DrawType="ChartDrawType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="14-17" XName="XValue" Width="2" YName="YValue3" Type="@SeriesType" DrawType="ChartDrawType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="17-20" XName="XValue" Width="2" YName="YValue4" Type="@SeriesType" DrawType="ChartDrawType.StackingColumn">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="23 Above" XName="XValue" Width="2" YName="YValue5" Type="@SeriesType" DrawType="ChartDrawType.StackingColumn">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

<div class="col-lg-4 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%">
                <tr style="height: 50px">
                    <td style="width: 50%">
                        <div>
                            Series Type:
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <SfDropDownList TValue="string" TItem="DropDownData" Placeholder="Polar" DataSource="@SeriesTypes">
                            <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="ChangeSeriesType"></DropDownListEvents>
                            <DropDownListFieldSettings Value="Type"></DropDownListFieldSettings>
                        </SfDropDownList>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

@code{

    private Theme Theme { get; set; }
    private ChartSeriesType SeriesType { get; set; } = ChartSeriesType.Polar;
    private List<DropDownData> SeriesTypes { get; set; } = new List<DropDownData>
    {
        new DropDownData() { Type = "Polar" },
        new DropDownData() { Type = "Radar" },
    };
    public List<PolarWindRoseData> ChartPoints { get; set; } = new List<PolarWindRoseData>
    {
        new PolarWindRoseData { XValue = "N", YValue= 1, YValue1= 0.8, YValue2= 0.8, YValue3= 0.3, YValue4= 0.2, YValue5= 0.2 },
        new PolarWindRoseData { XValue = "NNE", YValue= 0.9, YValue1= 0.7, YValue2= 0.7, YValue3= 0.3, YValue4= 0.2, YValue5= 0.2 },
        new PolarWindRoseData { XValue = "NE", YValue= 0.7, YValue1= 0.8, YValue2= 0.5, YValue3= 1.1, YValue4= 1.2, YValue5= 0.5 },
        new PolarWindRoseData { XValue = "ENE", YValue= 0.9, YValue1= 1, YValue2= 0.4, YValue3= 0.9, YValue4= 1, YValue5= 0.4 },
        new PolarWindRoseData { XValue = "E", YValue= 0.9, YValue1= 0.6, YValue2= 0.9, YValue3= 0.5, YValue4= 0.7, YValue5= 0.4 },
        new PolarWindRoseData { XValue = "ESE", YValue= 0.8, YValue1= 0.5, YValue2= 0.7, YValue3= 0.3, YValue4= 0.8, YValue5= 0.3 },
        new PolarWindRoseData { XValue = "SE", YValue= 0.7, YValue1= 0.4, YValue2= 0.6, YValue3= 0.5, YValue4= 0.5, YValue5= 0.3 },
        new PolarWindRoseData { XValue = "SSE", YValue= 1.4, YValue1= 0.4, YValue2= 0.5, YValue3= 0.4, YValue4= 0.6, YValue5= 0.2 },
        new PolarWindRoseData { XValue = "S", YValue= 2, YValue1= 1.2, YValue2= 0.6, YValue3= 0.6, YValue4= 0.4, YValue5= 0.4 },
        new PolarWindRoseData { XValue = "SSW", YValue= 2, YValue1= 2.5, YValue2= 2, YValue3= 1, YValue4= 0.5, YValue5= 0.3 },
        new PolarWindRoseData { XValue = "SW", YValue= 2.2, YValue1= 2, YValue2= 1.8, YValue3= 1, YValue4= 0.4, YValue5= 0.2 },
        new PolarWindRoseData { XValue = "WSW", YValue= 1.8, YValue1= 1.1, YValue2= 0.8, YValue3= 0.1, YValue4= 0.4, YValue5= 0.2 },
        new PolarWindRoseData { XValue = "W", YValue= 1.6, YValue1= 1.8, YValue2= 2.1, YValue3= 1, YValue4= 0.4, YValue5= 0.4 },
        new PolarWindRoseData { XValue = "WNW", YValue= 1.2, YValue1= 1.2, YValue2= 1.5, YValue3= 1.3, YValue4= 1.1, YValue5= 1.2 },
        new PolarWindRoseData { XValue = "NW", YValue= 2, YValue1= 2.5, YValue2= 2, YValue3= 1, YValue4= 0.2, YValue5= 0.7 },
        new PolarWindRoseData { XValue = "NNW", YValue= 1.8, YValue1= 1.1, YValue2= 0.8, YValue3= 0.1, YValue4= 0.4, YValue5= 0.2 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public void ChangeSeriesType(ChangeEventArgs<string, DropDownData> args)
    {
        this.SeriesType = (ChartSeriesType)Enum.Parse(typeof(ChartSeriesType), args.Value.ToString(), true);
    }

    public class DropDownData
    {
        public string Type { get; set; }
    }

    public class PolarWindRoseData
    {
        public string XValue { get; set; }
        public double YValue { get; set; }
        public double YValue1 { get; set; }
        public double YValue2 { get; set; }
        public double YValue3 { get; set; }
        public double YValue4 { get; set; }
        public double YValue5 { get; set; }
    }
}
